<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <!-- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> -->
    <script src="./vue.global.min.js"></script>
    <script src="./axios.min.js"></script>
    <title>Vite App</title>
  </head>
  <body>
    <div id="queryButton">
      <button @click="queryUser">查询用户</button>
      <ul>
        <!-- <li v-show="totalInfo">{{totalInfo}}</li> -->
        <li v-for="item in userList">{{item.id}},{{item.name}}</li>
      </ul>
    </div>
  </body>
</html>
<script>
  const queryApp = {
    data(){
      return {
        userList: null
        // totalInfo: null
      }
    },
    methods: {
      queryUser(){
        axios
          .post('api/user/queryUser')
          .then(response => {
            console.log(response);
            this.userList = response.data;
            // this.totalInfo = response.data;
          })
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
      }
    }
  };
  vm = Vue.createApp(queryApp).mount('#queryButton')
  // vm.$watch('importButton', function (newValue, oldValue) {
  //   // 这个回调将在 vm.kilometers 改变后调用
  //   document.getElementById ("importButton").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
  // })
</script>